<template>
    <div class="home-container">
        <!-- 搜索框 -->
        <div class="search-area">
            <van-search v-model="pageQuery.storeName" placeholder="请输入搜索关键词" shape="round" background="transparent"
                class="custom-search" @click="onSearch">
            </van-search>
        </div>
        <!-- 内容区 -->
        <div class="content-area">
            <!-- Banner轮播图 -->
            <div class="banner">
                <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="#f02c00">
                    <van-swipe-item>
                        <div class="banner-item banner-item-1">
                            <h3>新人专享</h3>
                            <p>首单立减20元</p>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div class="banner-item banner-item-2">
                            <h3>限时秒杀</h3>
                            <p>超值优惠等你来</p>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div class="banner-item banner-item-3">
                            <h3>品牌日</h3>
                            <p>大牌美食5折起</p>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>

            <!-- 快捷功能区 -->
            <div class="quick-actions">
                <div class="action-item">
                    <van-icon name="bars" color="#f02c00" size="24" />
                    <span>全部</span>
                </div>
                <div class="action-item">
                    <van-icon name="shopping-cart-o" color="#f02c00" size="24" />
                    <span>超市便利</span>
                </div>
                <div class="action-item">
                    <van-icon name="gift-o" color="#f02c00" size="24" />
                    <span>水果生鲜</span>
                </div>
                <div class="action-item">
                    <van-icon name="fire-o" color="#f02c00" size="24" />
                    <span>外卖</span>
                </div>
            </div>

            <!-- 推荐商家 -->
            <div class="section-title">
                <van-icon name="fire-o" color="#f02c00" />
                <span>推荐商家</span>
            </div>

            <!-- 推荐商家列表 -->
            <div class="merchant-list">
                <div v-for="(merchant, index) in merchantList" :key="merchant.id ?? index">
                    <MerchantCard :merchant="merchant" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import router from '@/router';

export default defineComponent({
  name: 'HomePage'
})
</script>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import type { Merchant } from '@/models/home/index'
import { getMerchantList } from '@/api/home/main'

const pageQuery = reactive({
  page: 1,
  pageSize: 10,
  storeName: ''
})

onMounted(async () => {
    const res = await getMerchantList(pageQuery)
    merchantList.value = res.data.list
})

// 在现有 ref 定义下方添加测试数据
const merchantList = ref<Merchant[]>([])

// 搜索事件
const onSearch = async (value: string) => {
    // console.log('搜索内容:', value)
    // const res = await getMerchantList(pageQuery)
    router.push({name:"Search"})
    // console.log(res);
    
    // 这里可以添加实际的搜索逻辑
}
</script>

<style scoped>
.home-container {
    padding: 0 15px;
    height: 95vh;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.nav-left {
    display: flex;
    gap: 10px;
}

.nav-text {
    font-size: 16px;
    color: #333;
}

.nav-text.active {
    color: #f02c00;
    font-weight: 600;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.location-text {
    font-size: 14px;
    color: #333;
}

/* .van-search {
    padding: 0;
} */

.custom-search :deep(.van-search__content) {
    background: #ffffff;
    border: 1px solid #f02c00;
    border-radius: 20px;
}

.custom-search :deep(.van-field__control) {
    caret-color: #f02c00;
}

.custom-search :deep(.van-field__left-icon) {
    margin-right: 10px;
}

.content-area {
    /* margin-top: 60px; 根据导航栏高度调整 */
    overflow-x: auto;
    padding-bottom: 60px; /* 为底部导航栏预留空间 */
    scrollbar-width: none;
    flex: 1;
    overflow-y: auto;
}

.content-area::-webkit-scrollbar {
    display: none;
}

.banner {
    padding: 10px 15px;
}

.banner-swipe {
    border-radius: 10px;
    overflow: hidden;
}

.banner-item {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px;
    color: #fff;
}

.banner-item-1 {
    background: linear-gradient(135deg, #ff6b35, #f02c00);
}

.banner-item-2 {
    background: linear-gradient(135deg, #ff9e2d, #ff6b35);
}

.banner-item-3 {
    background: linear-gradient(135deg, #2dce89, #1aae6f);
}

.banner-item h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.banner-item p {
    font-size: 14px;
    opacity: 0.9;
}

.quick-actions {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
}

.action-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.action-item span {
    font-size: 12px;
    color: #666;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
}

.merchant-card {
    margin-bottom: 10px;
    margin-top: 5px;
    padding: 12px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    width: calc(100% - 30px);
}

.van-card {
    background-color: #ffffff;
    padding: 0;
}

.tags-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 0;
}

.left-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.rating-info,
.sales-info,
.review-info,
.favorites-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-score {
    font-weight: 600;
    color: #ff9000;
    font-size: 14px;
}

.sales-text {
    color: #666;
    font-weight: 500;
}

.middle-info {
    flex: 2;
}

.right-info {
    flex: 1;
    text-align: right;
}

.merchant-footer {
    width: 100%;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0;
    font-size: 12px;
}

.review-text,
.favorites-text {
    color: #666;
}

.promotion-info {
    margin-top: 8px;
    text-align: center;
}

/* 图标样式调整 */
.van-icon {
    font-size: 14px;
}
</style>